<breadcrumbs></breadcrumbs>

<div class="content-container">

    <div
            ng-show="showHelp"
            class="info-container"
            passive-content="editpkgversionlocalizationhelp.html">
    </div>

    <form name="editPkgVersionLocalizationForm" novalidate="novalidate">

        <table id="edit-localization-container">
            <tr>
                <td id="natural-language-translations-cell">
                    <div ng-repeat="translation in translations">
                        <span ng-show="isTranslationSelected(translation)">
                            &#8594;
                        </span>
                        <a
                                ng-class="classesForTranslation(translation)"
                                ng-click="goChooseTranslation(translation)">
                            <message key="{{'naturalLanguage.' + translation.naturalLanguage.code}}"></message>
                        </a>
                        ({{translation.naturalLanguage.code}})
                        <span ng-show="translation.wasEdited" class="muted">*</span>
                    </div>

                    <div
                            id="natural-language-translations-add-language-container"
                            ng-show="addableNaturalLanguages.length">
                        <select
                                required="true"
                                ng-model="selectedAddableNaturalLanguage"
                                ng-options="anAddableNaturalLanguages.title for anAddableNaturalLanguages in addableNaturalLanguages">
                        </select>
                        <button ng-click="goAddSelectedAddableNaturalLanguage()">+</button>
                    </div>
                </td>
                <td id="translation-cell">

                    <div ng-show="!isTranslationValid(selectedTranslation)" class="alert-container">
                        <message key="editPkgVersionLocalization.summaryAndDescription.required"></message>
                    </div>

                    <h2><message key="editPkgVersionLocalization.summary.title"></message></h2>
                    <textarea ng-model="selectedTranslation.summary" id="translation-cell-summary"></textarea>

                    <h2><message key="editPkgVersionLocalization.description.title"></message></h2>
                    <textarea ng-model="selectedTranslation.description" id="translation-cell-description"></textarea>

                </td>
                <td id="english-original-cell">
                    <h1><message key="editPkgVersionLocalization.englishOriginal.title"></message></h1>
                    <h2><message key="editPkgVersionLocalization.summary.title"></message></h2>
                    <p>{{englishTranslation.summary}}</p>
                    <h2><message key="editPkgVersionLocalization.description.title"></message></h2>
                    <p><plain-text-content value="englishTranslation.description"></plain-text-content></p>
                </td>
            </tr>
        </table>

        <div id="edit-localization-actions-container">
            <p>
                <em>Effects:</em>
                &nbsp;&nbsp;
                <input type="radio" name="selectedArchitectureApplicability" value="{{architectureCode}}" ng-model="selectedArchitectureApplicability">
                <message key="editPkgVersionLocalization.selectedArchitectureApplicability.singleArchitecture.title" parameters="[architectureCode]"></message>
                &nbsp;&nbsp;
                <input type="radio" name="selectedArchitectureApplicability" value="__all" ng-model="selectedArchitectureApplicability">
                <message key="editPkgVersionLocalization.selectedArchitectureApplicability.allArchitectures.title" parameters="[pkg.name]"></message>
            </p>

            <div>
                <button
                        ng-disabled="!canSave()"
                        ng-click="saveEditedLocalizations()"
                        type="submit"
                        class="main-action">
                    <message key="editPkgVersionLocalization.action.title"></message>
                </button>
            </div>
        </div>

    </form>

    <ul>
        <li ng-show="!showHelp">
            <a href="" ng-click="goShowHelp()">
                <message key="gen.help.title"></message>
            </a>
        </li>
    </ul>

</div>

<div class="footer"></div>
<spinner spin="shouldSpin()"></spinner>

